<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML5 File Drag and Drop Upload with jQuery and PHP | Tutorialzine Demo</title>
        
        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        
        <!-- Including The jQuery Library -->
		<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
		
		<!-- Including the HTML5 Uploader plugin -->
		<script src="assets/js/jquery.filedrop.js"></script>
		
		<!-- The main script file 
        <script src="assets/js/script.js"></script>-->
        
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script>
        	$(function(){
				var dropbox = $('#dropbox'),
					message = $('.message', dropbox);
				
				dropbox.filedrop({
					// The name of the $_FILES entry:
					paramname:'pic',
					
					maxfiles: 5,
			    	maxfilesize: 2,
					url: '{{url_handler}}',
					
					uploadFinished:function(i,file,response){
						$.data(file).addClass('done');
						// response is the JSON object that post_file.php returns
					},
					
			    	error: function(err, file) {
						switch(err) {
							case 'BrowserNotSupported':
								showMessage('Your browser does not support HTML5 file uploads!');
								break;
							case 'TooManyFiles':
								alert('Too many files! Please select 5 at most! (configurable)');
								break;
							case 'FileTooLarge':
								alert(file.name+' is too large! Please upload files up to 2mb (configurable).');
								break;
							default:
								break;
						}
					},
					
					// Called before each upload is started
					beforeEach: function(file){
						if(!file.type.match(/^image\//)){
							alert('Only images are allowed!');
							
							// Returning false will cause the
							// file to be rejected
							return false;
						}
					},
					
					uploadStarted:function(i, file, len){
						createImage(file);
					},
					
					progressUpdated: function(i, file, progress) {
						$.data(file).find('.progress').width(progress);
					}
			    	 
				});
				
				var template = '<div class="preview">'+
									'<span class="imageHolder">'+
										'<img />'+
										'<span class="uploaded"></span>'+
									'</span>'+
									'<div class="progressHolder">'+
										'<div class="progress"></div>'+
									'</div>'+
								'</div>'; 
				
				
				function createImage(file){
			
					var preview = $(template), 
						image = $('img', preview);
						
					var reader = new FileReader();
					
					image.width = 100;
					image.height = 100;
					
					reader.onload = function(e){
						
						// e.target.result holds the DataURL which
						// can be used as a source of the image:
						
						image.attr('src',e.target.result);
					};
					
					// Reading the file as a DataURL. When finished,
					// this will trigger the onload function above:
					reader.readAsDataURL(file);
					
					message.hide();
					preview.appendTo(dropbox);
					
					// Associating a preview container
					// with the file, using jQuery's $.data():
					
					$.data(file,preview);
				}
			
				function showMessage(msg){
					message.html(msg);
				}
			
			});
        </script>
    </head>
    
    <body>
		
		<!--<header>
			<h1>HTML5 File Upload with jQuery and PHP</h1>
		</header>-->
		
		<div id="dropbox">
			<span class="message">Drop images here to upload. <br /><i>(they will only be visible to you)</i></span>
		</div>
		<div id="display">
			<a href="{{url_display}}">Display uploaded image</a>
		</div>

    </body>
</html>

